<template>
  <view>
    <view class="custom-tabbar" :class="{ fixed }">
      <view class="tab-item" v-for="(item, i) in leftItems" :key="item.text" @tap="handleTap(item, i)">
        <image class="icon" :src="active === i ? item.activeIcon : item.icon" mode="aspectFit" />
        <text class="label" :class="{ active: active === i }">{{ item.text }}</text>
      </view>

      <view class="tab-center" @tap="handleCenterTap">
        <view class="center-btn">
          <text class="center-text">AI</text>
        </view>
        <text class="label">{{ centerText }}</text>
      </view>

      <view class="tab-item" v-for="(item, j) in rightItems" :key="item.text" @tap="handleTap(item, j + leftItems.length + 1)">
        <image class="icon" :src="active === (j + leftItems.length + 1) ? item.activeIcon : item.icon" mode="aspectFit" />
        <text class="label" :class="{ active: active === (j + leftItems.length + 1) }">{{ item.text }}</text>
      </view>
    </view>
    <view v-if="placeholder" class="tabbar-placeholder"></view>
  </view>

</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    active: {
      type: Number,
      default: 0
    },
    items: {
      // 四个角标项（左2右2）
      type: Array,
      default: () => ([
        { text: '首页', pagePath: '/pages/index', icon: '/static/images/tabbar/home.png', activeIcon: '/static/images/tabbar/home_.png', isTab: true },
        { text: '分类', pagePath: '/pages/work/index', icon: '/static/images/tabbar/work.png', activeIcon: '/static/images/tabbar/work_.png', isTab: true },
        { text: '订单', pagePath: '/pages/order/list', icon: '/static/images/tabbar/work.png', activeIcon: '/static/images/tabbar/work_.png', isTab: true },
        { text: '我的', pagePath: '/pages/mine/index', icon: '/static/images/tabbar/mine.png', activeIcon: '/static/images/tabbar/mine_.png', isTab: true }
      ])
    },
    centerText: {
      type: String,
      default: 'AI智能咨询'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    leftItems() {
      return this.items.slice(0, 2)
    },
    rightItems() {
      return this.items.slice(2, 4)
    }
  },
  methods: {
    handleTap(item, index) {
      if (!item || !item.pagePath) return
      // 统一使用 reLaunch，因系统 tabBar 已移除
      uni.reLaunch({ url: item.pagePath })
      this.$emit('change', index)
    },
    handleCenterTap() {
      // 中间AI按钮：跳转到AI智能助手
      uni.navigateTo({
        url: '/pages/ai/chat',
        fail: (err) => {
          console.error('跳转AI聊天页面失败', err)
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          })
        }
      })
      // 保持事件发射，以便父组件可以监听（向后兼容）
      this.$emit('center-tap')
    }
  }
}
</script>

<style scoped>
.custom-tabbar {
  height: 100rpx;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eef2f5;
}
.custom-tabbar.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.tabbar-placeholder {
  height: 120rpx; /* 预留底部空间，避免内容被遮挡 */
}
.tab-item {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icon {
  width: 48rpx;
  height: 48rpx;
}
.label {
  margin-top: 6rpx;
  font-size: 20rpx;
  color: #666;
}
.label.active {
  color: #1f2937;
  font-weight: 600;
}
.tab-center {
  position: relative;
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.center-btn {
  position: absolute;
  top: -32rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: linear-gradient(180deg, #19c3a1 0%, #0ea5a5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
}
.center-text {
  font-size: 28rpx;
  font-weight: 700;
}
</style>


